<template>
  <el-card v-if="item" class="flowPrevNode">
    <div slot="header" :class="item.nodeCls">
      <span class="name">
        <icon icon="node" class="nodeIcon" />
        {{ item.name }}
      </span>
      <icon class="icon" :icon="item.auditType == 1 ? 'user' : 'peoples'" />
    </div>
    <span class="line">{{ item.show }}</span>
    <span :class="'line ' + item.nodeCls">结果:<span class="result">{{ nodeStatus[item.status] }}</span></span>
  </el-card>
</template>

<script>
export default {
  name: 'FlowPrevNode',
  inject: ['getNode'],
  components: {
  },
  data() {
    return {
      item: null,
      nodeStatus: {
        0: '待开始',
        1: '进行中',
        2: '审核通过',
        3: '审核未通过',
        4: '终审通过',
        5: '已跳过'
      }
    }
  },
  computed: {
  },
  mounted() {
    const node = this.getNode()
    const data = node.getData()
    this.initNode(data)
  },
  methods: {
    initNode(node) {
      if (node.status === 0) {
        node.nodeCls = 'wait'
      } else if (node.status === 1) {
        node.nodeCls = 'run'
      } else if (node.status === 2) {
        node.nodeCls = 'success'
      } else if (node.status === 5) {
        node.nodeCls = 'jump'
      } else {
        node.nodeCls = 'end'
      }
      this.item = node
    }
  }
}
</script>
<style>
.flowPrevNode .el-card__header:has(.run){
  background-color: #1890ff !important;
  color: #fff;
}
.flowPrevNode .el-card__header:has(.success){
  background-color: #43af2b !important;
  color: #fff;
}
.flowPrevNode .el-card__header:has(.jump){
  background-color: #ffba00 !important;
  color: #fff;
}
.flowPrevNode .el-card__header:has(.end){
  background-color: #ff4949 !important;
  color: #fff;
}
.flowPrevNode .run .result {
  color: #1890ff;
  margin-left: 5px;
}
.flowPrevNode .success .result {
  color: #43af2b;
   margin-left: 5px;
}
.flowPrevNode .jump .result {
  color: #ffba00;
   margin-left: 5px;
}
.flowPrevNode .end .result {
  color: #ff4949;
   margin-left: 5px;
}
.flowPrevNode .wait .result {
  color: #909399;
   margin-left: 5px;
}
.flowPrevNode .el-card__header:has(.wait){
  background-color: #909399 !important;
  color: #fff;
}
.flowPrevNode .el-card__body {
  font-size: 14px;
  line-height: 20px;
  height: 75px ;
  padding: 10px;
}
.flowPrevNode .icon{
  float: right;
}
.flowPrevNode .line {
  line-height: 25px;
  display: inline-block;
  width: 100%;
}
.flowPrevNode .name .nodeIcon{
  color: #fff;
  font-size: 16px;
  margin-right: 5px;
}
</style>

